iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 22
1
自我挑戰組

前端史萊姆與Vue的三十天時光冒險系列 第 22

Day22 閒不下來的史萊姆(三):scroll down按鈕實作

  • 分享至 

  • xImage
  •  

本文同步發表於斜槓女紙部落格:Day22 閒不下來的史萊姆(三):scroll down按鈕實作

Day22 閒不下來的史萊姆(三):scroll down按鈕實作

平順滑動到指定的位置

相信大家應該有使用過HTML錨點(anchor) 的方法,讓瀏覽者可以直接點選單後跳到相對應的內容,如範例

不過阿~直接使用HTML錨點(anchor)的操作方式,會非常迅速地直接跳到連結的id物件,視覺上來看少了這麼一咪咪流暢度,這次我加了一些其他寫法,讓點擊時能平順地滑動到下方的房間列表。

如果使用JQuery的話,很簡單的就能達成了。

參考範例:demo:CSS scroll down button

$(function () {
    $('.scroll-btn').on('click', function (e) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: $($(this).attr('href')).offset().top
        }, 500, 'linear');
    });
});

不過別忘了我們現在使用的環境是Vue.js,如果真的使用上面的方法,你可能就會跟我一樣在console工具看到下面的畫面

console錯誤圖

為什麼會這樣呢?

因為animatescrollTopJQuery屬性, 不是css屬性, 所以無法使用transition或者animate去加動畫。

在不引入jQuery的前提下,想要平滑的滾動到房間列表的話,只能借用外掛的力量或是自己手刻一個ScrollDown的監聽事件惹。

不過試了好幾個外掛都失敗以後,整個覺得人森好難,最後還是偷吃步先使用jQuery的方法實作完成。

尋找外掛時看到了一個覺得挺不錯的滾動套件:vue-scrollto ,可惜要採用webpack打包才能正常使用的概念,所以暫時先放棄他惹,等到我把整個專案用webpack打包時再來嘗試看看這個套件吧!

今天心很累的就先到這兒囉!


上一篇
Day21 寫於開始實作前(2):Vue.js的Methods以及監聽事件 (v-on)
下一篇
Day23 萬丈高樓平地起(6):What is Vue CLI?
系列文
前端史萊姆與Vue的三十天時光冒險30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言